<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>fam</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <!--引入字体图标相关的样式文件-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!--mi is Q-->

    <link rel="stylesheet" href="qcss/Q_tou03-1.css">

    <!--    layui-->
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <style>
        .container-fluid {
            padding: 20px;
        }

        /*头部样式颜色修改*/
        .Tou a {
            color: black;
        }

        header > div {
            width: 100%;
            height: 80px;
            /*background-color:pink ;*/
            /*头部阴影样式*/
            box-shadow: 0px 2px 10px 5PX #b5b4b3;
        }

        /*==================================================================================*/

        body {
            background-color: #FFFFFF;
            /*padding-top: 20px;*/
            color: red;
        }

        h3 {
            color: red;
            position: absolute;
            left: 43%;
            top: -7px;
        }

        #works {
            width: 100%;
            padding: 10px;
        }
    /*    ------------------------------------------------------*/

        .SH_X {
            width: 100%;
            height: 200px;
            /*background: url("img_user/t01.jpg");*/
            /*background-size: 50%;*/
            border-radius: 20px;
            margin-bottom: 10px;
            padding-top: 20px;
            padding-left: 100px;
        }

        .SH_XTU {
            width: 140px;
            height: 140px;
            float: left;
            margin-right: 50px;
            /*height: 100px;*/
            /*margin: 48px auto 0;*/
        }

        .SH_XTU img {
            width: 140px;
            height: 140px;
        }

        .SH_XWB {
            /*text-align: center;*/
            color: plum;
            margin-top: 20px;
        }

    </style>
</head>
<body>
<!--container导航条开始-->
<header class="Tou">
    <div>
        <nav class="navbar">
            <div class="container-fluid">
                <!-- 品牌和切换得到更好的移动显示分组 -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <img width="80px" src="img/logoz.png" alt="">
                    <!--                    <a class="navbar-brand" href="#">红猪</a>-->
                </div>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="板凳长板凳短">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
                <!-- 收集用于切换的导航链接、表单和其他内容 -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">推荐</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true"
                               aria-expanded="false">发布 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">创作视频</a></li>
                                <li><a href="#">个人视频浏览</a></li>
                                <li><a href="#">视频分享</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">发布文案</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">上传文件</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">个人中心</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle glyphicon" data-toggle="dropdown" role="button"
                               aria-haspopup="true" aria-expanded="false">
                                <p><span class="glyphicon glyphicon-plus"></span></p>
                                <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>

    </div>
</header>
<section class="well container">
    <div class="container" id="works">
        <div class="SH_X">
            <div class="SH_XTU"><img class="img-circle" src="img_user/t04.jpg" alt=""></div>
            <div class="SH_XWB"><h1 class="">啦啦你个大冬瓜</h1></div>
            <div class="SH_XWB" id="SH_XW"><a href="">一句话介绍一下自己吧，让别人更了解你</a></div>
        </div>
        <div class="row">
            <!--左侧主要内容-->
            <div class="col-md-offset-2 col-md-8">
                <div class="bs-docs-section">
                    <form id="myform" method="post"
                          enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="title">标题</label> <input type="text"
                                                                 class="form-control" id="title" name="title"
                                                                 placeholder="请输入作品标题">
                        </div>
                        <div class="form-group">
                            <label for="aabstract">作者姓名</label> <input type="text"
                                                                       class="form-control" id="aabstract" name="author"
                                                                       placeholder="请输入作者姓名">
                        </div>
                        <div class="form-group">
                            <label for="intro">作品简介</label>
                            <textarea class="form-control" rows="4" id="intro"
                                      name="intro">无详细介绍</textarea>
                        </div>
                        <div class="form-group">
                            <label>选择分类</label>
                            <select name="categoryId">
                                <!--value=""获取id-->
                                <option v-for="c in c_arr" :value="c.id">{{c.name}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile">选择文件</label>
                            <input type="file" id="exampleInputFile" name="file">
                        </div>
                        <div class="text-center">
                            <button type="button" class="btn btn-danger btn-lg "
                                    @click="upload()">发布作品
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <!--左侧内容结束-->
        </div>
    </div>
</section>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!--外部js-->
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<!--弹窗-->
<!-- 加载sweetalert -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<!--引入瀑布流相关js文件-->
<script src="JS/imagesloaded.pkgd.js"></script>
<script src="JS/masonry.pkgd.min.js"></script>
<script>
    let v = new Vue({
        el: "form",
        data: {
            c_arr: []
        },
        created: function () {
            //请求所有分类信息
            axios.get("/category/select").then(function (response) {
                v.c_arr = response.data;
            })
        },
        methods: {
            upload: function () {
                //得到form表单
                let data = new FormData(document.querySelector("form"));
                //判断是否选择了文件
                if (data.get("file").name == "") {
                    alert("请选择上传的文件...");
                    return;
                }
                //发出请求
                axios.post("/product/insert", data).then(function (response) {
                    alert("发布成功!")
                    location.href = "/admin-product.html";//显示首页
                })
            }
        }
    })
</script>
</body>
</html>